<template>
  <div class="personal-info">
    <h2>{{ username }}</h2>
    <p>年龄: {{ age }}</p>
    <p>电子邮箱: {{ email }}</p>
    <p>地址: {{ address }}</p>
    <el-row>
      <el-col>
        <el-button type="primary" class="float-right" @click="openDialogForm">修改个人信息</el-button>
      </el-col>
    </el-row>
  </div>
  <el-dialog v-model="dialogFormVisible" title="修改个人信息">
    <el-form>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input type="number" v-model="form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电子邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input show-word-limit maxlength="30" type="textarea" v-model="form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary" @click="updateUserInfo">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <router-view></router-view>
</template>

<script setup>
import {computed} from "vue";
import store from "@/store";

const formLabelWidth = '140px'
const dialogFormVisible = ref(false)

const age = ref(25);
const email = ref('johndoe@example.com');
const address = ref('123 Main St, City');
const userInfo = computed(() => store.state.user.userInfo)
const username = computed(() => userInfo.value?.name)

const form = reactive({
  age: age.value,
  email: email.value,
  address: address.value
});

const openDialogForm = () => {
  form.age = age.value;
  form.email = email.value;
  form.address = address.value;
  dialogFormVisible.value = true;
};

const updateUserInfo = () => {
  age.value = form.age;
  email.value = form.email;
  address.value = form.address;
  dialogFormVisible.value = false;
};
</script>


<style scoped>
.personal-info {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
}
.float-right {
  float: right;
}
.personal-info h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.personal-info p {
  margin-bottom: 5px;
}

.float-right {
  float: right;
  margin-top: 10px;
}
</style>
